<template>
	<view>
		<view class="header">引用前面题目多选的选中项</view>
		<view class="main">
			<view class="main-item flex" v-for="(item,index) in list" :key="index">
				<text>{{item.num}}</text>
				<view class="item-center">
					<span>[多选题]</span>
					<text>{{item.title}}</text>
				</view>
				<view class="item-right">
					<label class="radio">
						<radio value="2" @tap="Radio" :data-index="index" :checked="item.check" color="#1F9FFB" /></label>
				</view>
			</view>
		</view>
		<button class="buttoncss">完成</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					num: 1,
					title: "题目1",
					check: false
				}, {
					num: 2,
					title: "题目2",
					check: false
				}, {
					num: 3,
					title: "题目3",
					check: false
				}]
			};
		},
		methods: {
			Radio(e) {
				let idx = e.currentTarget.dataset.index
				this.list.forEach((el, index) => {
					index === idx ? this.list[index].check = true : this.list[index].check = false
				})
			}
		},
		onShareAppMessage(options) {
			let shareObj = {
				success: (res) => {
					if (res.errMsg == 'shareAppMessage:ok') {
						uni.showToast({
							title: '分享成功',
							icon: 'success',
							duration: 1500
						})
					}
				},
				fail: () => {
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						uni.showToast({
							title: '取消分享',
							icon: 'none',
							duration: 2000
						})
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},
				complete: () => {
					// 转发结束之后的回调（转发成不成功都会执行）
				}
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: #F0F0F0;
	}

	.header {
		background: #fff;
		border-bottom: 1rpx solid #DFDFDF;
		padding: 15rpx 20rpx;
		color: #999;
		font-size: 24rpx;
	}

	.main {
		background: #fff;
		padding: 15rpx 20rpx;

		.main-item {
			justify-content: space-between;
			border-bottom: 1rpx solid #DFDFDF;
			height: 100rpx;

			.item-center {
				width: 80%;
			}
		}
	}

	.buttoncss {
		width: 690rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 50rpx;
		margin: 0 auto;
		position: fixed;
		bottom: 10%;
		left: 30rpx;
		color: #fff;
		font-size: 36rpx;
		background: #1F9FFB;
	}
</style>
